<template>
	<div class="app">

		<Category>
			<h3 class="title">我是电影分类</h3>
			<video controls :src="videoUrl"></video>
		</Category>

		<Category>
			<h3 class="title">我是游戏分类</h3>
			<ul>
				<li v-for="game in gameArr" :key="game.id">{{game.name}}---{{game.price}}</li>
			</ul>
		</Category>

		<Category>
			<h3 class="title">我是美食分类</h3>
			<img :src="foodUrl" alt="">
		</Category>

	</div>
</template>

<script>
	import Category from './components/Category'

	export default {
		name:'App',
		components:{Category},
		data(){
			return{
				gameArr:[
					{id:'001',name:'王者荣耀',price:100},
					{id:'002',name:'绝地求生',price:200},
					{id:'003',name:'使命召唤',price:300},
					{id:'004',name:'穿越火线',price:400},
				],
				foodUrl:'https://s3.ax1x.com/2021/01/16/srJlq0.jpg',
				videoUrl:'https://v-cdn.zjol.com.cn/276984.mp4'
			}
		}
	}
</script>

<style>
	.app{
		display: flex;
		justify-content: space-around;
	}
	li{
		font-size: 20px;
	}
	img{
		width: 100%;
	}
	video{
		width: 100%;
	}
</style>